<template>
  <el-menu class="navbar" mode="horizontal">
    <!-- <hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger> -->
    <layout-tags></layout-tags>
    <div class="right-menu">
      <!-- <error-log class="error item"></error-log> -->
      <el-dropdown class="item">
        <span class="el-dropdown-link">
          <img class="avatar" src="../assets/bigUserHeader.png">
          {{name}}管理员
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <router-link to="/">
            <el-dropdown-item>{{$t('navbar.dashboard')}}</el-dropdown-item>
          </router-link>
          <el-dropdown-item divided>
            <span @click="logout" style="display:block;">{{$t('navbar.logOut')}}</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </el-menu>
</template>
<script>
import { mapGetters } from 'vuex'
import Hamburger from '@/components/Hamburger'
import layoutTags from './layoutTags'
import ErrorLog from '@/components/ErrorLog'
import Screenfull from '@/components/Screenfull'
import LangSelect from '@/components/LangSelect'
import ThemePicker from '@/components/ThemePicker'
import { getToken, removeToken } from '@/utils/auth'
export default {
  name: 'layoutNavBar',
  components: {
    Hamburger,
    layoutTags,
    ErrorLog,
    Screenfull,
    LangSelect,
    ThemePicker
  },
  computed: {
    ...mapGetters(['sidebar', 'name', 'avatar'])
  },
  data() {
    return {
      searchVal: '',
      timeout: null,
      showSearchInput: false,
      restaurants: []
    }
  },
  methods: {
    toggleSideBar() {
      this.$store.dispatch('toggleSideBar')
    },
    logout() {
      this.$store.dispatch('LogOut').then(() => {
        this.$router.push({ path: '/login' })
      })
    },
    handleBtnSearch() {
      this.showSearchInput = !this.showSearchInput
      this.$nextTick(() => {
        this.$refs['searchInput'].focus()
      })
    },
    querySearchAsync(queryString, cb) {
      var restaurants = this.restaurants
      var results = queryString
        ? restaurants.filter(this.createStateFilter(queryString))
        : restaurants

      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        cb(results)
      }, 1000 * Math.random())
    },
    createStateFilter(queryString) {
      return state => {
        return (
          state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        )
      }
    },
    handleSelect(item) {
      this.searchVal = ''
      this.showSearchInput = false
      this.$message({
        message: `选取了 ${item.value}`,
        type: 'success'
      })
    }
  },
  mounted() {
    // this.restaurants = search()
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
.navbar .item .el-input__inner {
  border: 0px;
  border-bottom: 1px solid #dcdfe6;
  border-radius: 0px;
}
.Homelogo {
  background: #1493fa;
  height: 56px;
  padding: 15px 0 0;
  text-align: center;
  span {
    background: url(../assets/logo.png) no-repeat 50%;
    display: block;
    height: 28px;
  }
}
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
.navbar {
  position: relative;
  height: 56px;
  line-height: 56px;
  border-radius: 0px !important;
  .hamburger-container {
    line-height: 58px;
    height: 50px;
    float: left;
    padding: 0 10px;
  }
  .breadcrumb-container {
    float: left;
  }
  .errLog-container {
    display: inline-block;
    vertical-align: top;
  }
  .right-menu {
    position: absolute;
    top: 0;
    right: 0px;
    // float: right;
    height: 50px;
    .item {
      display: inline-block;
      margin-right: 10px;
      i {
        font-size: 18px;
      }
      .btnSearch {
        margin-right: 5px;
        font-size: 18px;
        color: rgba(0, 0, 0, 0.65);
      }
      .avatar {
        width: 22px;
        vertical-align: -5px;
      }
    } 
  }
}
</style>
